<!DOCTYPE html>
<html>
<head>
  <title>WebSocket简单聊天室</title>
  <meta charset="utf-8" name="viewport" content="width=device-width">
  <link rel="stylesheet" href="/webjars/mdui/dist/css/mdui.css">
  <script src="/webjars/jquery/jquery.min.js"></script>
  <script src="/webjars/mdui/dist/js/mdui.js"></script>
</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-pink">

<div class="mdui-container">
  <div class="mdui-toolbar mdui-color-theme">
    <a class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>
    <span class="mdui-typo-title">简单聊天室</span>
    <div class="mdui-toolbar-spacer"></div>
    <a class="mdui-btn mdui-btn-icon" href="https://www.jianshu.com/p/964370d9374e" target="_blank"><i
        class="mdui-icon material-icons">search</i></a>
    <a class="mdui-btn mdui-btn-icon" th:href="@{/}"><i
        class="mdui-icon material-icons">exit_to_app</i></a>
    <a class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">more_vert</i></a>
  </div>
</div>

<div>
  <div class="mdui-container container_text">

    <div class="mdui-row">
      <div class="mdui-col-xs-12 mdui-col-sm-6">
        <div class="mdui-col-xs-12 mdui-col-sm-10">
          <div class="mdui-textfield-floating-label" style="margin-top:15px">
            <i class="mdui-icon material-icons">欢迎：</i>
            <i class="mdui-icon" id="username" th:text="${username}"></i>
          </div>
        </div>
        <div class="mdui-col-xs-12 mdui-col-sm-10">
          <div class="mdui-textfield mdui-textfield-floating-label">
            <i class="mdui-icon material-icons">textsms</i>
            <label class="mdui-textfield-label">发送内容</label>
            <input class="mdui-textfield-input" id="msg"/>
          </div>
          <div class="mdui-container" style="padding:20px 35px">
            <button class="mdui-btn mdui-color-theme-accent mdui-ripple"
                    onclick="sendMsgToServer()">发送 (enter)
            </button>
            <button class="mdui-btn mdui-color-theme mdui-ripple"
                    onclick="clearMsg()">清屏
            </button>
          </div>
        </div>
      </div>

      <div class="mdui-col-xs-6 mdui-col-sm-5" style="padding:10px 0">
        <div class="mdui-chip">
                    <span class="mdui-chip-icon mdui-color-blue">
                        <i class="mdui-icon material-icons">&#xe420;</i></span>
          <span class="mdui-chip-title">聊天内容</span>
        </div>

        <div class="mdui-chip">
                    <span class="mdui-chip-icon mdui-color-blue">
                        <i class="mdui-icon material-icons">face</i></span>
          <span class="mdui-chip-title">在线人数</span>
          <span class="mdui-chip-title chat-num">0</span>
        </div>
        <div class="message-container">

        </div>
      </div>

    </div>
  </div>
</div>

<script th:inline="javascript">

  /**
   * WebSocket客户端
   *
   * 使用说明：
   * 1、WebSocket客户端通过回调函数来接收服务端消息。例如：webSocket.onmessage
   * 2、WebSocket客户端通过send方法来发送消息给服务端。例如：webSocket.send();
   */
  function getWebSocket() {
    /**
     * WebSocket客户端 PS：URL开头表示WebSocket协议 中间是域名端口 结尾是服务端映射地址
     */
    var webSocket = new WebSocket(/*[[${webSocketUrl}]]*/ 'ws://localhost:8080/chat');
    /**
     * 当服务端打开连接
     */
    webSocket.onopen = function (event) {
      console.log('WebSocket打开连接');
    };

    /**
     * 当服务端发来消息：1.广播消息 2.更新在线人数
     */
    webSocket.onmessage = function (event) {
      console.log('WebSocket收到消息：%c' + event.data, 'color:green');
      //获取服务端消息
      var message = JSON.parse(event.data) || {};
      var $messageContainer = $('.message-container');
      //喉咙发炎
      if (message.type === 'SPEAK') {
        $messageContainer.append(
            '<div class="mdui-card" style="margin: 10px 0;">' +
            '<div class="mdui-card-primary">' +
            '<div class="mdui-card-content message-content">' + message.username + "：" + message.msg
            + '</div>' +
            '</div></div>');
      }
      $('.chat-num').text(message.onlineCount);
      //防止刷屏
      var $cards = $messageContainer.children('.mdui-card:visible').toArray();
      if ($cards.length > 5) {
        $cards.forEach(function (item, index) {
          index < $cards.length - 5 && $(item).slideUp('fast');
        });
      }
    };

    /**
     * 关闭连接
     */
    webSocket.onclose = function (event) {
      console.log('WebSocket关闭连接');
    };

    /**
     * 通信失败
     */
    webSocket.onerror = function (event) {
      console.log('WebSocket发生异常');

    };
    return webSocket;
  }

  var webSocket = getWebSocket();

  /**
   * 通过WebSocket对象发送消息给服务端
   */
  function sendMsgToServer() {
    var $message = $('#msg');
    if ($message.val()) {
      webSocket.send(JSON.stringify({username: $('#username').text(), msg: $message.val()}));
      $message.val(null);
    }

  }

  /**
   * 清屏
   */
  function clearMsg() {
    $(".message-container").empty();
  }

  /**
   * 使用ENTER发送消息
   */
  document.onkeydown = function (event) {
    var e = event || window.event || arguments.callee.caller.arguments[0];
    e.keyCode === 13 && sendMsgToServer();
  };


</script>

</body>
</html>
